<template>

  <div class="page-role">
    <el-form :inline="true" class="search">
    
        <el-button class="search-button" @click="getRoleList">搜索</el-button>

        <el-input
          v-model="searchForm.name"
          placeholder="名称"
          clearable
        >
        </el-input>

        <div class="title">搜索内容</div>



    
        <el-button class="change-button" type="primary" @click="dialogVisible = true" v-if="hasAuth('add/prat')">新增角色</el-button>
        <!--        <el-button type="primary" @click="dialogVisible = true" >新增</el-button>-->

        <el-popconfirm title="这是确定批量删除吗？" @confirm="delHandle(null)">
        <el-button type="danger" class="change-button" slot="reference" :disabled="delBtlStatu" v-if="hasAuth('delete/prat')" @click="">批量删除
          </el-button>
        </el-popconfirm>

    </el-form>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      width="1840"
      @selection-change="handleSelectionChange"
      v-if="hasAuth('get/prat')"
    >

      <el-table-column
        type="selection" align="center"
        width="70">
      </el-table-column>

      <el-table-column
        prop="title" align="center"
        label="名称"
        width="150">
      </el-table-column>
      <el-table-column
        prop="coding"
        label="唯一编码" align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述" width="800"
        show-overflow-tooltip>
      </el-table-column>

      <el-table-column
        prop="state" align="center"
        label="状态">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.state === 0" type="success">正常</el-tag>
          <el-tag size="small" v-else-if="scope.row.state === 1" type="danger">禁用</el-tag>
        </template>

      </el-table-column>
      <el-table-column
        prop="icon" align="center"
        label="操作">

        <template slot-scope="scope">
          <el-button type="text" @click="permHandle(scope.row.id)" v-if="hasAuth('prat/jurisdiction')">分配权限
          </el-button>
          <el-divider direction="vertical"></el-divider>

          <el-button type="text" @click="editHandle(scope.row.id)" v-if="hasAuth('update/prat')">编辑</el-button>
          <el-divider direction="vertical"></el-divider>

          <template>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
              <el-button type="text" slot="reference" v-if="hasAuth('delete/prat')">删除</el-button>
            </el-popconfirm>
          </template>

        </template>
      </el-table-column>

    </el-table>


    <el-pagination
      small
      layout="prev, pager, next"
      :total="num"
      :page-size="page_size"
      @prev-click="prevfun"
      @next-click="nextfun"
      @current-change="currentchange"
    >
    </el-pagination>
    <!--新增对话框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose">

      <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px" class="demo-editForm">

        <el-form-item label="角色名称" prop="title" label-width="100px">
          <el-input v-model="editForm.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="唯一编码" prop="coding" label-width="100px">
          <el-input v-model="editForm.coding" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="description" label-width="100px">
          <el-input v-model="editForm.description" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="状态" prop="state" label-width="100px">
          <el-radio-group v-model="editForm.state">
            <el-radio :label=1>禁用</el-radio>
            <el-radio :label=0>正常</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('editForm')">立即添加</el-button>
          <el-button @click="resetForm('editForm')">重置</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
    <!--修改对话框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="600px"
      :before-close="handleClose">

      <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px" class="demo-editForm">

        <el-form-item label="角色名称" prop="title" label-width="100px">
          <el-input v-model="editForm.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="唯一编码" prop="coding" label-width="100px">
          <el-input v-model="editForm.coding" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="description" label-width="100px">
          <el-input v-model="editForm.description" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="状态" prop="state" label-width="100px">
          <el-radio-group v-model="editForm.state">
            <el-radio :label=1>禁用</el-radio>
            <el-radio :label=0>正常</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm1(editForm.id)">立即修改</el-button>
          <el-button @click="resetForm('editForm')">重置</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

    <el-dialog
      title="分配权限"
      :visible.sync="permDialogVisible"
      width="600px">

      <el-form :model={permForm}>

        <el-tree
          :data="permTreeData"
          show-checkbox
          ref="permTree"
          :default-expand-all=true
          node-key="id"
          :check-strictly=false
          :check-on-click-node=true
          :props="defaultProps">
        </el-tree>

      </el-form>

      <span slot="footer" class="dialog-footer">
			    <el-button @click="permDialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="submitPermFormHandle('permForm')">确 定</el-button>
			</span>

    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Role",
  data() {
    return {
      searchForm: {},
      delBtlStatu: true,

      total: 0,
      size: 10,
      current: 1,

      dialogVisible: false,
      dialogVisible1: false,
      editForm: {},

      tableData: [],

      editFormRules: {
        title: [
          {required: true, message: '请输入角色名称', trigger: 'blur'}
        ],
        coding: [
          {required: true, message: '请输入唯一编码', trigger: 'blur'}
        ],
        state: [
          {required: true, message: '请选择状态', trigger: 'blur'}
        ]
      },
      user_id: [],

      multipleSelection: [],

      permDialogVisible: false,
      permForm: {},
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      permTreeData: [],
      page_size: 10,
      num: 0,
      page: 1,
    }
  },
  created() {
    this.getRoleList()

    this.$axios.get(this.$settings.BASE_URL + 'jurisdiction/jurisdictions/').then(res => {
      this.permTreeData = res.data.data
      console.log(this.permTreeData, 1111111111111111111)
    })
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log("勾选")
      console.log(val)
      this.multipleSelection = val;

      this.delBtlStatu = val.length == 0
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getRoleList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val
      this.getRoleList()
    },

    resetForm(formName) {
      // this.$refs[formName].resetFields();
      this.dialogVisible = false
      this.dialogVisible1 = false
      this.editForm = {}
    },
    handleClose() {
      this.resetForm('editForm')
    },

    getRoleList() {
      this.$axios.get(this.$settings.BASE_URL + 'prat/prata/', {
        params: {
          title: this.searchForm.name,
          page: this.page,
        },
      }).then(res => {
          this.tableData = res.data.data.results
          this.num = res.data.data.count
        this.next = res.data.data.next
        this.previous = res.data.data.previous
        }
      )
      // this.$axios.get(this.$settings.BASE_URL + 'prat/prata/', {
      //   params: {
      //     title: this.searchForm.name,
      //     current: this.current,
      //     size: this.size
      //   },
      // }).then(res => {
      //   console.log(res)
      // })
    },
    prev() {
      this.$axios.get(this.next).then((res) => {
        if (res.data.code == 100) {
          this.tableData = res.data.data.results
          this.num = res.data.data.count
          this.next = res.data.data.next
          this.previous = res.data.data.previous
        }
      })
    },
    next() {
      console.log(this.next)
      this.$axios.get(this.next).then((res) => {
        if (res.data.code == 100) {
          this.tableData = res.data.data.results
          this.num = res.data.data.count
          this.next = res.data.data.next
          this.previous = res.data.data.previous
        }
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 编辑
          this.$axios.post(this.$settings.BASE_URL + 'prat/create/', this.editForm).then(res => {
            if (res.data.code == 100) {
              this.$message({
                showClose: true,
                message: '恭喜你，操作成功',
                type: 'success',
                onClose: () => {
                  this.getRoleList()
                }
              });

              this.dialogVisible = false
              this.resetForm(formName)
            } else {
              this.$message.error('修改失败');
            }

          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 点击修改按钮
    submitForm1(id) {
      this.$axios.put(this.$settings.BASE_URL + 'prat/put/' + id + '/', this.editForm).then(res => {
        if (res.data.code == 100) {
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.getRoleList()
            }
          });

          this.dialogVisible1 = false

        } else {
          this.$message.error('修改失败');
        }

      })
    },
    // 编辑点击事件
    editHandle(id) {
      this.$axios.get(this.$settings.BASE_URL + 'prat/prata/' + id + '/').then(res => {
        this.editForm = res.data.data
        this.dialogVisible1 = true
      })
    },
    delHandle(id) {

      var ids = []

      if (id) {
        ids.push(id)
      } else {
        this.multipleSelection.forEach(row => {
          ids.push(row.id)
        })
      }

      console.log(ids)
      // 删除
      this.$axios.delete(this.$settings.BASE_URL + "prat/delete/delete/?username=" + ids).then(res => {
        if (res.data.code == 100) {
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.getRoleList()
            }
          });
        } else
          this.$message.error('修改失败');
      })
    },
    // 打开分配权限菜单
    permHandle(id) {
      this.permDialogVisible = true
      this.user_id = id
      this.$axios.get(this.$settings.BASE_URL + 'prat/pratjurisdiction/' + id + '/').then(res => {

        console.log(2222)
        this.permForm = res.data.data.jurisdictionmodels_id
        console.log(this.permForm)

        let menuIds = []
        res.data.data.jurisdictionmodels_id.forEach(row => {
          menuIds.push(row.id)
        })
        this.$refs.permTree.setCheckedKeys(menuIds)
      })
    },

    submitPermFormHandle(formName) {
      // var menuIds = this.$refs.permTree.getCheckedKeys()
      let zi = this.$refs.permTree.getCheckedKeys()
      let fu =this.$refs.permTree.getHalfCheckedKeys()
      let new1 = zi.concat(fu)
      // 分配权限
      this.$axios.post(this.$settings.BASE_URL + 'prat/pratjurisdictioncreate/', {
        'id': this.user_id,
        'jurisdiction': new1
      }).then(res => {
        if (res.data.code == 100) {
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.getRoleList()
            }
          });
          this.permDialogVisible = false
          this.resetForm(formName)
        } else {
          this.$message.error('修改失败');
        }

      })
    },
    prevfun(value) {
      this.page = value
      //value拿到的当前的页码，点击上一页触发该函数
      this.loginlog()
    },
    nextfun(value) {
      this.page = value
      //value拿到页码，点击下一页触发该函数
      this.loginlog()
    },
    currentchange(value) {
      this.page = value
      //页码发生变化会触发，这个用来触发点击页码时触发的。
      this.loginlog()
    },
  }
}
</script>

<style lang="less">
.page-role {
  overflow: auto; //高度超出显示滚动条
  height: @h*1000vh;

  // 检测屏幕宽度
  @media screen and (min-width: 1000px) and (max-width: 1500px) {

    // 屏幕宽度在1000 到 1500之间
    .el-button {
      height: @h*40vh;
      line-height: 1;
      padding: 5px 8px;
      font-size: 1rem;
    }



  }
  .el-table--enable-row-hover .el-table__body tr:hover>td{
    background: #404040;
  }
  .el-table{
    margin: @h*30vh @w*30vw @h*20vh;
    // padding-top: @h*10vh;
    background: #404040;
    width:  @w*1860vw;
    height: @h*820vh;
    th{
      color: #fff;
      background: #404040;
    }
    td{
      background: #2e2e2e;
      color: #fff;
    }
    
    
  }
  .el-pagination{
    float: right;
    margin-right: @w*30vw;

  }
  .search{
      border-bottom: 1px solid #404040;
      // float: right;
      height: @h*60vh;
      margin: @h*20vh @w*30vw;
      .title{
        float:right;
        line-height:  @h*40vh;
      }
      .change-button{
        float: left;
        margin-right:@w*20vw;
      }
      .el-input{
        float: right;
        width: @w*300vw;
        height: @h*40vh;
        margin: 0 @w*20vw;
        background: #2E2E2E;
        border-radius: 0px;
      }
      .el-input__inner{
        background: #4d4d4d;
        border: none;
      }
      .search-button{
        background: #00A0E9;
        color: #fff;
        border: none;
        float:right;
      }
    }
}
</style>
